<template>
	<view style="overflow: hidden;background-color: #FFFFFF;">

		<view class="head-nav">
			<!-- 左侧红色图标 -->
			<view @click="checkIndex(0)"> <text :class="navIndex==0?'activite':''">手机验证码登录</text>
			</view>
			<view @click="checkIndex(1)"> <text :class="navIndex==1?'activite':''">密码登录</text>
			</view>
		</view>
		<!-- 手机验证码登录navIndex==0 -->
		<view class="" v-if="navIndex==0">
			<view class="cellBox">
				<view class="cell"><input placeholder="请输入手机号" style="width: 100%;" v-model="phone" maxlength="11"
						type="number" /></view>
				<view class="auth">
					<input type="number" v-model="authCode" maxlength="6" placeholder="验证码" />
					<view class="auth_btn" @click="getyzm">
						{{ captchaTime <= 0 ? '获取验证码' : captchaTime + 's' }}
					</view>
				</view>
			</view>
			<!-- 手机号验证码登录 -->
			<view class="login" @click="login">
				<view class="login_btn" :style="{color:activeStyle.color,background:activeStyle.background}">
					<text>登录</text>
				</view>
			</view>
		</view>


		<!-- 密码登录	navIndex==1 -->
		<view class="" v-if="navIndex==1">
			<view class="cellBox">
				<view class="cell"><input style="width: 100%;" placeholder="请输入手机号/用户名" v-model="phone" maxlength="11"
						type="number" /></view>
				<view class="password">
					<input style="width: 70%;font-size: 30rpx;" v-model="passWord" placeholder="密码"
						:password="passwordEye" />
					<image @click.stop="passwordEyeChange" v-show="passwordEye"
						src="http://106.14.56.171:15016/images/login/yj02.png" style="width: 38rpx;height: 38rpx;" />
					<image @click.stop="passwordEyeChange" v-show="!passwordEye"
						src="http://106.14.56.171:15016/images/login/yj01.png" style="width: 38rpx;height: 38rpx;" />
				</view>
			</view>
			<view class="login" @click="loginaaaa">
				<view class="login_btn" :style="{color:activeStyle.color,background:activeStyle.background}">
					<text>登录</text>
				</view>
			</view>
		</view>
		<!-- 阅读并同意易乓乒用户协议和隐私协议 -->
		<view class="agree">
			<checkbox style="transform: scale(0.8)" :checked="checkValue" @click="check" class="round red"></checkbox>
			<view class="agree_text">
				我已阅读并同意
				<text @click="userAgreement">《易乓乒用户协议和隐私协议》</text>
			</view>
		</view>


		<view class="fast_login">
			<view class="border_login">
				<view class="fast_border"></view>
				<text>快捷方式登录</text>
				<view class="fast_border"></view>
			</view>
			<view class="wxIosLoin">
				<button class="fast_wx" @click="wxLogin">
					<!-- 微信LOG -->
					<img src="http://106.14.56.171:15016/images/blank/wxLogin.png" />
				</button>
				<!-- #ifdef APP-PLUS  -->
				<button class="fast_wx" @click="appleLog" v-if="source==2">
					<img src="http://106.14.56.171:15016/images/blank/losLogin.png" />
				</button>
				<!-- #endif -->
			</view>

		</view>
		<!-- 弹出框 -->
		<uni-popup ref="popup">
			<view class="model-wraper">
				<view class="modal-title">提醒</view>
				<view class="modal-body">您当前登录的微信并未绑定ePumping账户，请使用手机号登录或注册并绑定微信号后再使用微信登录功能</view>
				<view>
					<view class="btn cancel" @click="handleCancel">确认</view>

				</view>
			</view>
		</uni-popup>
		<Loading :loadingShow="loading"></Loading>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		baseMethod
	} from '@/config/method.js'
	import Loading from '@/components/loading/loading.vue'
	export default {
		data() {
			return {
				source: '',
				androidIos: '',
				passwordEye: true,
				navIndex: 0, // 切换tabs页
				isActive: true,
				checkValue: false,
				captchaTime: 0,
				phone: '', //手机号
				passWord: '', //密码
				authCode: '', //验证码
				loading: false, // 加载中
				activeStyle: {
					color: '#454545',
					background: '#F6F6F6'
				},

			};
		},
		components: {
			Loading
		},
		watch: {
			// 监听输入手机时登录按钮变色
			phone(nValue, oValue) {
				if (this.phone != '') {
					this.activeStyle.color = '#fff';
					this.activeStyle.background = '#9e001a';
				} else {
					this.activeStyle.color = '#fff';
					this.activeStyle.background = '#F6F6F6';
				}
			}
		},
		onLoad() {
			this.androidIos = getApp().globalData.androidIos
			this.source = getApp().globalData.source
		},
		methods: {
			...mapMutations(['setUserInfo']),
			//切换tab页
			checkIndex(value) {
				this.navIndex = value;
			},
			appleLog() {
				if (!this.checkValue) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					});
					return;
				}
				let _that = this
				uni.login({
					provider: 'apple',
					success: function(loginRes) {
						// 登录成功  
						uni.getUserInfo({
							provider: 'apple',
							success(res) {
								// 获取用户信息成功  
								console.log(res, '苹果信息成功')
								if (res.errMsg == 'getUserInfo:ok') {
									_that.loginChecke(res.userInfo.openId, '', 6, '')
								}
							}
						})
					},
					fail: function(err) {
						_that.loading = false
						console.log(err)
					}
				});
			},
			getyzm() {
				var regExp = new RegExp('/^134[0-8]\d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|18[2-478])\d{8}$/');

				if (regExp.test(this.phone)) {
					uni.showToast({
						title: '请输入或检查手机号格式',
						icon: 'none'
					});
					return;
				}
				if (this.captchaTime > 0) {
					uni.showToast({
						title: '不能重复获取',
						icon: 'none'
					});
					return;
				} else {
					if (this.phone == '') {
						uni.showToast({
							title: '请填写手机号',
							icon: 'none'
						});
						return;
					}
					let data = {
						phone: this.phone,
						appId: this.androidIos,
					}
					console.log(data, 'data');
					this.$httpNew.get('authApi/auth/GetVerificationCode', data).then(res => {
						// console.log('llllllllll', res);
						this.captchaTime = 60;
						let timer = setInterval(() => {
							this.captchaTime--;
							if (this.captchaTime < 1) {
								clearInterval(timer);
								this.captchaTime = 0;
							}
						}, 1000);
					});
				}
			},
			check() {
				this.checkValue = !this.checkValue;
			},

			login() {
				if (!this.checkValue) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					});
					return;
				}
				var regExp = new RegExp('/^134[0-8]\d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|18[2-478])\d{8}$/');
				if (regExp.test(this.phone)) {
					uni.showToast({
						title: '请输入或检查手机号格式',
						icon: 'none'
					});
					return;
				}
				this.$httpNew
					.post('authApi/auth/GetAppAuthCode', {
						phone: this.phone,
						code: this.authCode,
						loginType: 0,
						appId: this.androidIos,
						source: this.source,

						// #ifdef H5
						source: this.source,
						source: 1,
						// #endif
					})
					.then(res => {
						console.log(res);
						if (res.accessToken, 257) {
							uni.setStorageSync('accessToken', res.accessToken);
							uni.setStorageSync('refreshToken', res.refreshToken);
							this.$httpNew.post('authApi/auth/GetUserInfo', {
								appId: this.androidIos
							}).then(res => {
								this.setUserInfo(res);
								uni.switchTab({
									url: './../index/index'
								});
							})
						}
					}).catch(err => {
						console.log(err);
						let mistake = err.errMsg.slice(1, 6)
						if (mistake == 'A0010') {
							uni.showToast({
								title: '账号不存在，请前往注册',
								icon: 'none'
							});
							uni.navigateTo({
								url: './information?phone=' + this.phone
							});

						}
					});
			},
			loginChecke(code, phoneCode, loginType, avatarUrl) {
				let data = {
					appId: this.androidIos,
					code: code,
					loginType: loginType,
					phoneCode: phoneCode,
					source: this.source
				};
				console.log('app微信登录', data);
				var _that = this
				this.$httpNew.post('authApi/auth/GetAppAuthCode', data).then(res => {
					console.log('sssssssss', res);
					if (res.accessToken) {
						uni.setStorageSync('accessToken', res.accessToken);
						uni.setStorageSync('refreshToken', res.refreshToken);
						this.$httpNew.post('authApi/auth/GetUserInfo', {
							appId: this.androidIos,
						}).then(res1 => {
							console.log(res1, 'resUser新的用户信息');

							_that.loading = false
							this.setUserInfo(res1);
							uni.switchTab({
								url: './../index/index'
							});



						}).catch(err => {
							_that.loading = false
						})
					} else {
						_that.loading = false
						if (res.phone) {
							this.$refs.popup.close();
							//这里跳转页面到注册
							uni.navigateTo({
								url: './information?phone=' + res.phone
							});
						} else {
							this.$refs.popup.open('center');
						}
					}
				}).catch(err => {
					let mistake = err.errMsg.slice(1, 6)
					if (mistake == 'A0021') {
						uni.showToast({
							title: 'Apple ID 未绑定',
							icon: 'none'
						});
						return;
					}
					_that.loading = false
				})
			},
			// 微信修改图片
			wxFileImaUser(file, token, userInfo) {
				let baseUrl = `${baseMethod()}api/user/uploadUserHead`
				console.log(baseUrl, file, token, userInfo)
				var _that = this
				uni.uploadFile({
					url: baseUrl,
					filePath: file,
					name: 'file',
					formData: {
						'count': '1'
					},
					header: {
						'Authorization': 'Bearer ' + token
					},
					success: function(uploadFileRes) {
						console.log(uploadFileRes)
						_that.loading = false
						if (uploadFileRes.statusCode == 200) {
							let data = JSON.parse(uploadFileRes.data)
							console.log(data)
							userInfo.headPortrait = data.data ? data.data : userInfo.headPortrait
							_that.setUserInfo(userInfo);
							uni.switchTab({
								url: './../index/index'
							})
						} else {
							_that.setUserInfo(userInfo);
							uni.switchTab({
								url: './../index/index'
							})
						}
					},
					fail: function(errFile) {
						_that.setUserInfo(userInfo);
						uni.switchTab({
							url: './../index/index'
						});
						_that.loading = false
					}
				})
			},
			goCode() {
				uni.navigateTo({
					url: './codeLogin'
				});
			},
			// 点击微信登录,获取微信权限
			// #ifdef MP-WEIXIN
			// 点击微信登录,获取微信权限      小程序微信登录
			wxLogin() {
				if (!this.checkValue) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					});
					return;
				}
				var _that = this
				uni.getUserProfile({
					desc: '登录后可同步数据',
					lang: 'zh_CN',
					success: res_info => {
						_that.loading = true
						uni.login({
							provider: 'weixin',
							success: res => {
								if (res.errMsg == 'login:ok') {
									_that.loginChecke(res.code, '', 2, res_info
										.userInfo
										.avatarUrl);
								} else {
									uni.showToast({
										title: '微信登录异常，请尝试其他形式登录',
										icon: 'none'
									});
									_that.loading = false
								}
							},
							fail: function() {
								_that.loading = false
							}
						});
					},
					fail: function() {
						_that.loading = false
					}
				});
			},
			// #endif
			// App端
			// #ifdef APP-PLUS
			wxLogin() {
				if (!this.checkValue) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					});
					return;
				}
				var _that = this;
				_that.loading = true
				uni.login({
					provider: 'weixin',
					success: function(res) {
						if (res.errMsg == 'login:ok') {
							_that.loginChecke(res.authResult.unionid, '', 4);
							// console.log('陈征和数据估计',res.userInfo);
						} else {
							uni.showToast({
								title: '微信登录异常，请尝试其他形式登录',
								icon: 'none'
							});
							_that.loading = false
						}
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(res) {
								console.log(JSON.stringify(res.userInfo));
							}
						});
					},
					fail: function() {
						_that.loading = false
					}
				});
			},
			/*非常重要，如果不加，App会报错 "toJSON"*/
			toJSON() {
				return this
			},
			// #endif
			handleCancel() {
				this.$refs.popup.close();
			},
			goLocal() {
				uni.navigateTo({
					url: './mobile_login'
				});
			},
			// 点击打开用户协议
			userAgreement() {
				uni.navigateTo({
					url: './userAgreement'
				});
			},
			// 密码登录
			passwordEyeChange() {
				this.passwordEye = !this.passwordEye;
			},
			loginaaaa() {
				// 判断当账号不存在时进行注册,账号存在时跳转到首页index
				if (!this.checkValue) {
					uni.showToast({
						title: '请勾选协议',
						icon: 'none'
					});
					return;
				}
				var regExp = new RegExp('/^134[0-8]\d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|18[2-478])\d{8}$/');
				if (regExp.test(this.phone)) {
					uni.showToast({
						title: '请输入或检查手机号格式',
						icon: 'none'
					});
					return;
				}
				if (this.passWord == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				let data = {
					appId: this.androidIos,
					phone: this.phone,
					passWord: this.passWord,
					loginType: 1,
					source: this.source
				};
				console.log('手机密码data', data.phone, data);
				this.$httpNew.post('authApi/auth/GetAppAuthCode', data).then(res => {
					console.log('token', res, data);
					if (res.accessToken) {
						uni.setStorageSync('accessToken', res.accessToken);
						uni.setStorageSync('refreshToken', res.refreshToken);
						this.$httpNew.post('authApi/auth/GetUserInfo').then(res => {
							this.setUserInfo(res);
							uni.switchTab({
								url: './../index/index'
							});
						});
					}
				}).catch(errPass => {
					console.log(errPass);
				});
			},
		}
	};
</script>

<style lang="less" scope>
	page {
		background-color: #fffFFF;
	}

	.active {
		background-color: red;
		color: #454545;
	}

	.back {
		width: 100%;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.back text {
		float: right;
		margin-right: 40rpx;
		color: #333;
		// background-color: aqua;
	}

	.cell {
		border-bottom: 1rpx solid #e0e0e0;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cellBox {
		padding: 0 40rpx;
		margin-top: 100rpx;
	}

	/* 
	.cellBox text {
		color: #000;
		font-weight: 500;
		font-size: 50rpx;
		display: block;
		line-height: 160rpx;
	} */

	.back {
		width: 100%;
		height: 100rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		/* background-color: aqua; */
		color: #000;
		font-weight: 500;
		font-size: 50rpx;
	}

	.back>text:nth-child(2) {
		font-size: 30rpx;
	}

	.auth {
		border-bottom: 1rpx solid #e0e0e0;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>input {
			height: 100%;
			width: 100%;
		}
	}

	.auth .auth_btn {
		color: #ffffff;
		background-color: #b4001e;
		font-size: 20rpx;
		/* border: solid 1rpx #adadad; */
		border-radius: 40rpx;
		width: 180rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
	}

	/* 点击"获取验证码",改变背景颜色和字体颜色 */
	.auth_btn:focus {
		background-color: #adadad;
		color: #ffffff;
	}

	.login {
		margin-top: 100rpx;
		width: 100%;
		height: 140rpx;
		padding: 0 40rpx;
		text-align: center;
	}

	.login .login_btn {
		line-height: 90rpx;
		font-size: 36rpx;
		margin-bottom: 50rpx;
		width: 90%;
		height: 90rpx;
		border-radius: 50rpx;
	}

	.agree {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
		color: #333;
		font-size: 20rpx;
		line-height: 30rpx;
		font-weight: bold;
	}

	.agree img {
		margin-top: 5rpx;
		width: 22rpx;
		height: 22rpx;
	}

	.agree_text {
		margin-left: 15rpx;
		width: 80%;
	}

	.agree_text text {
		color: #c6001b;
	}

	.fast_login text {
		font-size: 26rpx;
		color: #989898;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

	.fast_login .fast_border {
		width: 140rpx;
		height: 20rpx;
		border-bottom: solid 3rpx #c6001b;
	}

	.fast_login .border_login {
		display: flex;
		justify-content: center;
		margin-top: 120rpx;
	}

	.fast_login .fast_wx {
		text-align: center;
		margin-top: 20rpx;
		background-color: #ffffff;
		border: none;
		// background-color: aqua;
	}

	button::after {
		border: 0;
	}

	.fast_login .fast_wx img {
		width: 100rpx;
		height: 100rpx;
	}

	.wxIosLoin {
		margin: auto;
		margin-top: 20px;
		width: 200px;
		display: flex;
	}

	.model-wraper {
		width: 600rpx;
		background-color: #fff;
		box-shadow: #dcdcdc 0px 0px 20rpx;
	}

	.modal-title {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		color: #666;
	}

	.modal-body {
		padding: 30rpx 30rpx 80rpx 30rpx;
	}

	.btn {
		width: 300rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		background-color: #fff;
		float: left;
		border-radius: 0rpx;
	}

	.btn.cancel {
		width: 100%;
		border-right: 1rpx solid #dcdcdc;
	}

	button::after {
		border: none;
		background-color: none;
	}

	.head-nav {
		width: 96%;
		margin-left: 2%;
		padding-bottom: 25rpx;
		background-color: #fff;
		border-radius: 15rpx 15rpx 0 0;
		display: flex;
		// background-color: #fff;
		// margin-top: 98rpx;
		// background-color: aqua;
		position: relative;
		top: 100rpx;

		>view {
			display: flex;
			justify-content: center;
			justify-content: space-around;
			margin-top: 20rpx;
			width: 100%;
			font-weight: 500;
			// >text{
			// 	font-size: 30rpx;
			// 	font-weight: 600;
			// 	color: #333;
			// }
		}


	}

	// 项目详情下面的横杆
	.activite {
		color: #B4001E;
		font-size: 30rpx;
		font-weight: 600;
		padding-bottom: 10rpx;
		border-bottom: #B4001E solid 8rpx;
	}

	// 密码登录
	.password {
		border-bottom: 1rpx solid #e0e0e0;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 36rpx;
	}

	.password image {
		width: 38rpx;
		margin-right: 14rpx;
	}
</style>